$checkbox-size: 40px;

#user-profile {
  .card {
    margin-bottom: 2rem;
    .card-header {
      padding: 1rem 1.5rem;
      .card-title {
        font-size: 16px;
        margin: 0;
      }
    }
  }
}

.music-service-selection {
  button.music-service-option {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
  }
  .music-service-option {
    input[type="radio"] {
      display: none;
      &:not(:disabled) ~ label {
        cursor: pointer;
      }
      &:disabled ~ label {
        color: $gray-400;
        border-color: $gray-400;
        cursor: not-allowed;
      }
    }
    label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 0.5rem;
      height: 100%;
      background: $white;
      border: 2px solid $green;
      border-radius: 5px;
      padding: 1rem;

      text-align: center;
      font-weight: normal;
      position: relative;

      > .title {
        flex: 1;
        flex-basis: 120px;
        padding: 0 0.4em;

        font-size: 1.35em;
        font-family: $headings-font-family;
        font-weight: $headings-font-weight;
        line-height: $headings-line-height;
      }
      > .details {
        flex: 2;
        text-align: justify;
        flex-basis: 200px;
      }
    }

    input[type="radio"]:checked + label {
      background: $green;
      color: $white;

      > .details {
        font-weight: bold;
      }
      &::after {
        position: absolute;
        left: 0;
        top: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        height: $checkbox-size;
        width: $checkbox-size;
        line-height: $checkbox-size;

        content: "✔";
        color: $green;
        font-size: 24px;
        text-align: center;

        border: 2px solid $green;
        background: $white;
        box-shadow: 3px 1px 5px -2px $dark;
      }
    }

    // Special style for the "off" button when no other option is selected
    &.disable {
      label {
        border-color: $border-color;
      }
      input[type="radio"]:checked + label {
        background: $gray-500;
      }
    }
  }
}
